import SimpleSchema from '/imports/lib/SimpleSchema';
import { selectData } from '../../pages/create/createSelectData';

let upd = {};

const findDisplayName = (id, source) => {
  for (let i = 0; i < source.length; i++) {
    if (source[i].id == id) {
      return source[i].text;
    }
  }
};

const validationName = new SimpleSchema({
  name: {
    type: String,
    min: 2,
    max: 40,
    label: '频道名称'
  }
});

const validationNotes = new SimpleSchema({
  notes: {
    type: String,
    required: false,
    max: 400,
    label: '频道描述'
  }
});

Template.channel_info_panel_update.onRendered(function() {
  $('#channel-info-type').on('change', function(event) {
    upd['type.name'] = event.target.value;
    upd['type.displayName'] = findDisplayName(event.target.value, selectData.type);
  });

  $('#channel-info-number-of-people').on('change', function(event) {
    upd['numberOfPeople.name'] = event.target.value;
    upd['numberOfPeople.displayName'] = findDisplayName(event.target.value, selectData.numberOfPeople);
  });

  $('#channel-info-policy').on('change', function(event) {
    upd['policy.name'] = event.target.value;
    upd['policy.displayName'] = findDisplayName(event.target.value, selectData.policy);
    upd['policy.apply'] = $('#channel-info-apply-policy:checked').val() ? true : false;
  });

  this.autorun(() => {
    let policyObj;
    if (this.data.channel) {
      policyObj = this.data.channel.policy;
    }
    $('#channel-info-apply-policy').on('change', function(event) {
      let checked = $('#channel-info-apply-policy:checked').val() ? true : false;
  
      if (upd['policy.name']) {
        upd['policy.apply'] = checked;
      } else {
        upd['policy.name'] = policyObj.name;
        upd['policy.displayName'] = policyObj.displayName;
        upd['policy.apply'] = checked;
      }
    });
  });
});

Template.channel_info_panel_update.onDestroyed(function () {
  upd = {};
});

Template.channel_info_panel_update.events({
  'click #cancel-channel-update'(event, instance) {
    instance.view.parentView.parentView.templateInstance().openUpdatePanel.set(false);
  },
  // upload cover
  'click #upload-channel-cover'() {
    $('#upload-channel-cover-input').val('').click();
  },
  'change #upload-channel-cover-input'(event) {
    if (event.target.files && event.target.files[0]) {
      let reader = new FileReader();

      reader.onload = function (e) {
        $('#crop-channel-cover-content').croppie('bind', {
          url: e.target.result
        });
        $('#crop-channel-cover-modal').modal();
      };

      reader.readAsDataURL(event.target.files[0]);
    }
  },
  // change name
  'change #update-channel-name'(event) {
    upd.name = event.target.value;
  },
  // change notes
  'change #update-channel-notes'(event) {
    upd.notes = event.target.value;
  },
  // submit
  'click #save-channel-update'(event, instance) {
    try {
      $('#update-channel-name-help').text('');
      $('#update-channel-notes-help').text('');

      if (upd.name) {
        validationName.validate({name: upd.name});
      }

      if (upd.notes) {
        validationNotes.validate({notes: upd.notes});
      }
      
      let id = instance.data.channel._id;

      Meteor.call('updateChannel', id, upd, function() {
        instance.view.parentView.parentView.templateInstance().openUpdatePanel.set(false);
      });
    } catch (error) {
      if (error.details) {
        if (error.details[0].name == 'name') {
          $('#update-channel-name-help').text(error.details[0].message);
        } else {
          $('#update-channel-notes-help').text(error.details[0].message);
        }
      }
    }
  }
});